<script setup lang="ts">
import { GithubFilled } from '@ant-design/icons-vue'
import $config from '@/config'

// 查看源码
const onViewSource = () => {
  window.open('https://gitee.com/darkwinoom/vue3-ai-scaffold')
}

// 查看作者
const onViewAuthor = () => {
  window.open('https://gitee.com/darkwinoom')
}
</script>

<template>
  <n-card size="small">
    <n-thing>
      <template #avatar>
        <n-avatar :size="50" src="/logo.png" />
      </template>
      <template #header>
        <div class="cursor-pointer" @click="onViewSource">{{ $config.title }}</div>
      </template>
      <template #description>
        <span class="author" @click="onViewAuthor">@DarkWinoom</span>
      </template>
      <template #header-extra>
        <a-tooltip title="查看完整源码" placement="top">
          <div class="cursor-pointer" @click="onViewSource">
            <GithubFilled class="text-xl" />
          </div>
        </a-tooltip>
      </template>
      <p>
        这是一个使用 ant-design-x-vue 搭建的前端 AI 交互脚手架，快速对接 OpenAI 标准模型推理服务。
      </p>
      <p>
        项目目前为开发探索阶段，部分功能正在开发中因此可能暂不可用，您可以随时关注代码仓库更新。如果您在更新后遇到问题，可以尝试
        “系统设置 -> 数据管理 -> 重置数据”。
      </p>
    </n-thing>
  </n-card>
</template>

<style lang="scss" scoped>
p {
  line-height: 2;
  margin-top: 10px;
}
.author {
  font-size: 13px;
  color: var(--vas-secondary-color);
  cursor: pointer;
}
:deep(.n-thing-header__extra) {
  display: flex;
  align-items: center;
}
:deep(.n-avatar) {
  background-color: #fff;
}
</style>
